<!DOCTYPE html>
<html>
    
    <head>
        <title>{$Think.config.app_name}</title>
        {include file="public/head"/}
        <style>
        </style>
    </head>
    
    <body class="layui-layout-body">
        <div id="LAY_app" class="layadmin-tabspage-none">
            <div class="layui-layout layui-layout-admin">
                {include file="public/menu"/}
                <!-- 主体内容 -->
                <div class="layui-body root_box" v-cloak>
                    <div class="layui-form layui-border-box">
                        <div class="layui-table-tool">
                            <div class="layui-form">
                                <div class="layui-input-inline">
                                    <button @click="item_add" type="button" class="layui-btn layui-btn-sm"><i class="iconfont icon-tianjia"></i>添加</button></span>
                                </div>
                                <div class="layui-input-inline">
                                    <select lay-ignore class="layui-input layui-input-sm" name="node_module" v-model="search" style="width:120px;">
                                        <option value="">请选择筛选器</option>
                                    </select>
                                </div>
                                <div class="layui-input-inline">
                                    <input type="text" v-model="keyword" class="layui-input layui-input-search" placeholder="输入关键词搜索"/>
                                </div>
                                <div class="layui-input-inline">
                                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" @click="getList"><i class="iconfont icon-search"></i>搜索</button></span>
                                </div>
                            </div>
                        </div>
                        <div class="layui-table-box">
                            <div class="layui-table-body layui-table-main">
                                <table cellspacing="0" cellpadding="0" border="0" class="layui-table" width="100%">
                                    <thead>
                                        <tr>
                                            <th class="layui-table-col-special">
                                                <div class="layui-table-cell" v-show="isSelectedAll">
                                                    <div lay-skin="primary" class="layui-unselect layui-form-checkbox layui-form-checked" onclick="selectALL()"><i class="layui-icon layui-icon-ok"></i></div>
                                                </div>
                                                <div class="layui-table-cell" v-show="!isSelectedAll">
                                                    <div lay-skin="primary" class="layui-unselect layui-form-checkbox" onclick="selectALL()"><i class="layui-icon layui-icon-ok"></i></div>
                                                </div>
                                            </th>
                                            <th>
                                                <div class="layui-table-cell">
                                                    <span>ID</span>
                                                    <span v-show="order[0]=='code_id' && order[1]=='asc'">
                                                        <span class="layui-table-sort layui-inline">
                                                            <i class="layui-edge layui-table-sort-asc" title="升序" skey="code_id" @click="sort" style="border-bottom-color:#333;" ></i>
                                                            <i class="layui-edge layui-table-sort-desc" title="降序" skey="code_id" @click="sort"></i>
                                                        </span>
                                                    </span>
                                                    <span v-show="order[0]=='code_id' && order[1]=='desc'">
                                                        <span class="layui-table-sort layui-inline">
                                                            <i class="layui-edge layui-table-sort-asc" title="升序" skey="code_id" @click="sort"></i>
                                                            <i class="layui-edge layui-table-sort-desc" title="降序" skey="code_id" @click="sort"  style="border-top-color:#333;"></i>
                                                        </span>
                                                    </span>
                                                    <span v-show="order[0]!='code_id'">
                                                        <span class="layui-table-sort layui-inline">
                                                            <i class="layui-edge layui-table-sort-asc" title="升序" skey="code_id" @click="sort"></i>
                                                            <i class="layui-edge layui-table-sort-desc" title="降序" skey="code_id" @click="sort"></i>
                                                        </span>
                                                    </span>
                                                </div>
                                            </th>
                                            <th><div class="layui-table-cell "><span>user</span></div></th><th><div class="layui-table-cell "><span>code</span></div></th>
                                            <th >
                                                <div class="layui-table-cell"><span>修改时间</span>
                                                    <span v-show="order[0]=='code_updatetime' && order[1]=='asc'">
                                                        <span class="layui-table-sort layui-inline">
                                                            <i class="layui-edge layui-table-sort-asc" title="升序" skey="code_updatetime" @click="sort" style="border-bottom-color:#333;" ></i>
                                                            <i class="layui-edge layui-table-sort-desc" title="降序" skey="code_updatetime" @click="sort"></i>
                                                        </span>
                                                    </span>
                                                    <span v-show="order[0]=='code_updatetime' && order[1]=='desc'">
                                                        <span class="layui-table-sort layui-inline">
                                                            <i class="layui-edge layui-table-sort-asc" title="升序" skey="code_updatetime" @click="sort"></i>
                                                            <i class="layui-edge layui-table-sort-desc" title="降序" skey="code_updatetime" @click="sort"  style="border-top-color:#333;"></i>
                                                        </span>
                                                    </span>
                                                    <span v-show="order[0]!='code_updatetime'">
                                                        <span class="layui-table-sort layui-inline">
                                                            <i class="layui-edge layui-table-sort-asc" title="升序" skey="code_updatetime" @click="sort"></i>
                                                            <i class="layui-edge layui-table-sort-desc" title="降序" skey="code_updatetime" @click="sort"></i>
                                                        </span>
                                                    </span>
                                                </div>
                                            </th>
                                            <th >
                                                <div class="layui-table-cell"><span>操作</span>
                                                </div>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-show="list.length==0">
                                            <td class="nodata" colspan="12">{{nomoredata}}</td>
                                        </tr>
                                        <tr v-show="list.length>0" v-for="(item, index) in list" :key="index">
                                            <td class="layui-table-col-special">
                                                <div class="layui-table-cell" v-show="isSelected(item.code_id)">
                                                    <div lay-skin="primary" class="layui-unselect layui-form-checkbox layui-form-checked" onclick="select(this)" :index="index" :primary_key="item.code_id"><i class="layui-icon layui-icon-ok"></i></div>
                                                </div>
                                                <div class="layui-table-cell" v-show="!isSelected(item.code_id)">
                                                    <div lay-skin="primary" class="layui-unselect layui-form-checkbox" onclick="select(this)" :index="index" :primary_key="item.code_id"><i class="layui-icon layui-icon-ok"></i></div>
                                                </div>
                                            </td>
                                            <td >
                                                <div class="layui-table-cell">{{item.code_id}}</div>
                                            </td>
                                            <td><div class="layui-table-cell">{{item.code_user}}</div></td><td><div class="layui-table-cell">{{item.code_code}}</div></td>
                                            <td >
                                                <div class="layui-table-cell">{{time2string(item.code_updatetime)}}</div>
                                            </td>
                                            <td class="layui-table-col-special">
                                                <div class="layui-table-cell">
                                                    <font color=#ccc v-show="item.code_status==1">
                                                        <a @click="item_enable" :itemid="item.code_id" class="layui-btn layui-btn-danger layui-btn-xs iconfont icon-guanbi3" title="启用"></a>
                                                    </font>
                                                    <font v-show="item.code_status==0">
                                                        <a @click="item_disable" :itemid="item.code_id"  class="layui-btn layui-btn-primary  layui-btn-xs iconfont icon-duihao" title="禁用"></a>
                                                    </font>
                                                    <a @click="item_edit" :itemid="item.code_id" class="layui-btn layui-btn-primary  layui-btn-xs iconfont icon-edit" title="编辑"></a>
                                                    <a @click="item_delete" :itemid="item.code_id" class="layui-btn layui-btn-primary layui-btn-xs iconfont icon-empty" title="删除"></a>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="layui-table-page">
                            <a @click="item_enable_all" class="layui-btn layui-btn-primary layui-btn-xs" title="启用选中项"><i class="iconfont icon-duihao"></i>启用</a>
                            <a @click="item_disable_all" class="layui-btn layui-btn-primary layui-btn-xs" title="禁用选中项"><i class="iconfont icon-guanbi3"></i>禁用</a>
                            <a @click="item_delete_all" class="layui-btn layui-btn-primary layui-btn-xs" title="删除选中项"><i class="iconfont icon-empty"></i>删除</a> 
                            {include file="public/paginate"/}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    {include file="public/foot"/}
    <script>
    var app = new Vue({
        el: ".root_box",
        data: {
            list:[],
            nomoredata:"数据加载中",
            current_page:1,
            total_page:1,
            per_page:20,
            total:0,
            search:"",
            keyword: '',
            order:[
                "code_id",
                "desc"
            ],
            selectList:[],
            isSelectedAll:false
            //上面的参数不允许删除
        },
        created() {
            this.getList();
        },
        methods:{
            isSelected:function(code_id){
                return this.selectList.indexOf(code_id)>=0?true:false;  
            },
            time2string:function(timestamps){
                return new Date(parseInt(timestamps) * 1000).Format("MM-dd hh:mm");
            },
            sort:function(e){
              this.order[0] = e.target.attributes.skey.value;
              this.order[1] = e.target.attributes.title.value=="升序"?'asc':'desc';
              this.getList();
            },
            prev:function(){
              this.current_page--;
              this.getList();
            },
            next:function(){
              this.current_page++;
              this.getList();
            },
            getList:function(){
                this.isSelectedAll = false;
                this.selectList = [];
                _loading();
                $.post("/api/code/lists",
                Object.assign({
                    per_page:this.per_page,
                    page:this.current_page,
                    search:this.search,
                    keyword:this.keyword,
                    order:this.order[0]+" "+this.order[1],
                },PostCommon),
                function(data,status){
                    _hideLoading();
                    if(data.code != 0){
                        _alert(data.msg);
                        app.nomoredata = data.msg;
                    }else{
                        if(data.data.data.length==0){
                            app.nomoredata = "没有更多数据了";
                        }
                        app.list = data.data.data;
                        app.current_page = data.data.current_page;
                        app.total_page = data.data.total%data.data.per_page==0?parseInt(data.data.total/data.data.per_page):parseInt(data.data.total/data.data.per_page)+1;
                        app.total = data.data.total;
                    }
                });
            },
            item_edit:function(e){
                var item_id = e.target.attributes.itemid.value;
                openFrame("/admin/code/update?code_id="+item_id,'修改临时凭证',500,310);
            },
            item_add:function(e){
                openFrame("/admin/code/add",'添加临时凭证',500,310);
            },
            item_enable:function(e){
                var item_id = e.target.attributes.itemid.value;
                var that = this;
                _confirm('是否确认启用这条数据?','启用提醒',function(){
                    _loading("正在启用");
                    $.post("/api/code/enable",
                    Object.assign({
                        code_id:item_id,
                    },PostCommon),
                    function(data,status){
                        _hideLoading();
                        if(data.code != 0){
                            _alert(data.msg);
                        }else{
                            that.getList();
                        }
                    });
                });
            },
            item_disable:function(e){
                var item_id = e.target.attributes.itemid.value;
                var that = this;
                _confirm('是否确认禁用这条数据?','禁用提醒',function(){
                    _loading("正在禁用");
                    $.post("/api/code/disable",
                    Object.assign({
                        code_id:item_id,
                    },PostCommon),
                    function(data,status){
                        _hideLoading();
                        if(data.code != 0){
                            _alert(data.msg);
                        }else{
                            that.getList();
                        }
                    });
                });
            },
            item_delete:function(e){
                var item_id = e.target.attributes.itemid.value;
                var that = this;
                _confirm('是否确认删除这条数据?','删除提醒',function(){
                    _loading("正在删除");
                    $.post("/api/code/delete",
                    Object.assign({
                        code_id:item_id,
                    },PostCommon),
                    function(data,status){
                        _hideLoading();
                        if(data.code != 0){
                            _alert(data.msg);
                        }else{
                            that.getList();
                        }
                    });
                });
            },
            item_delete_all:function(){
                var that = this;
                _confirm('是否确认批量删除选择的数据?','批量删除提醒',function(){
                    _loading("正在批量删除");
                    $.post("/api/code/delete",
                    Object.assign({
                        code_id:app.selectList.join(","),
                    },PostCommon),
                    function(data,status){
                        _hideLoading();
                        if(data.code != 0){
                            _alert(data.msg);
                        }else{
                            that.getList();
                        }
                    });
                });
            },
            item_enable_all:function(){
                var that = this;
                _confirm('是否确认批量启用选择的数据?','批量启用提醒',function(){
                    _loading("正在批量启用");
                    $.post("/api/code/enable",
                    Object.assign({
                        code_id:app.selectList.join(","),
                    },PostCommon),
                    function(data,status){
                        _hideLoading();
                        if(data.code != 0){
                            _alert(data.msg);
                        }else{
                            that.getList();
                        }
                    });
                });
            },
            item_disable_all:function(){
                var that = this;
                _confirm('是否确认批量禁用选择的数据?','批量禁用提醒',function(){
                    _loading("正在批量禁用");
                    $.post("/api/code/disable",
                    Object.assign({
                        code_id:app.selectList.join(","),
                    },PostCommon),
                    function(data,status){
                        _hideLoading();
                        if(data.code != 0){
                            _alert(data.msg);
                        }else{
                            that.getList();
                        }
                    });
                });
            },
        }
    });
    function select(primary_key){
        var primary_key = parseInt($(primary_key).attr('primary_key'));
        console.log(primary_key);
        if(app.selectList.indexOf(primary_key)>=0){
            app.selectList.splice(app.selectList.indexOf(primary_key),1);
        }else{
            app.selectList.push(primary_key);
        }
        console.log(JSON.parse(JSON.stringify(app.selectList)));
    }
    function selectALL(){
        app.selectList = [];
        if(!app.isSelectedAll){
            app.list.forEach(function(value,index){
                app.selectList.push(value.code_id);
            });
        }
        app.isSelectedAll = !app.isSelectedAll;
    }
    </script>

</html>